// Common Style
.disNone{
  display: none !important;
  //transition: all 0.5s ease;
}
.disBlock{
  display: block !important;
}
.clr:after{
  display: block;
  clear: both;
  content: ' ';
  height: 0;
  overflow: hidden;
}
.fl{
  display: inline;
  float: left;
}
.fr{
  display: inline;
  float: right;
}
.hide {
	display: none;
}
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items:center;
  flex-wrap:wrap
}
.flex-a {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-wrap:wrap
}
.flex__it {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.line{
  width: 100%;
  height: rpx(10);
  background: $pageBgColor;
}
.line1{
  width: 100%;
  height: rpx(5);
  background: $pageBgColor;
}
.line_v {
  width: rpx(.5);
	height: 100%;
	background: $lineColor;
}
.line_h {
	width: 100%;
  height: rpx(.5);
  background: $lineColor;
}
.padd_trb{
  padding: rpx(10) rpx(15) rpx(10) 0;
}
.padd_lr{
  padding: 0 rpx(15);
}
.padd_trbl{
  padding: rpx(10) rpx(15);
}
.padd_trb-6{
  padding: rpx(6) rpx(15) rpx(6) 0;
}
.padd_tb{
  padding: rpx(10) 0
}
.nopadd {
	padding: 0 !important
}
.nopadd_t{
	padding-top: 0 !important
}
.nopadd_b{
	padding-bottom: 0 !important
}
.nopadd_l{
  padding-left: 0 !important
}
.nopadd_r{
  padding-right: 0 !important
}
.nomar_l{
  margin-left: 0 !important
}
.padd_t-10{
  padding-top:rpx(10)
}
.padd_b-10{
  padding-bottom:rpx(10)
}
.padd_l-10{
  padding-left:rpx(10)
}
.padd_l-15{
  padding-left:rpx(15) !important;
}
.padd_t-15{
  padding-top:rpx(15)
}
.padd_b-15{
  padding-bottom:rpx(15)
}
.padd_t-20{
  padding-top:rpx(20)
}
.padd_b-20{
  padding-bottom:rpx(20)
}
.padd_t-50{
  padding-top: rpx(50)
}
.padd_b-50{
  padding-bottom: rpx(50)
}
.mar_l-15{
  margin-left: rpx(15)
}
.mar_r-15{
  margin-right: rpx(15)
}
.mar_lr-15{
  margin: rpx(0) rpx(15) rpx(0) rpx(15)
}
.mar_t-15{
  margin-top: rpx(15)
}
.mar_t-12{
  margin-top: rpx(12)
}
.mar_t-10{
  margin-top: rpx(10)
}
.mar_t-5{
  margin-top: rpx(5)
}
.mar_t-0{
  margin-top: 0
}
.mar_r-12{
  margin-right: rpx(12)
}
.mar_l-12{
  margin-left: rpx(12)
}
.mar_l-8{
  margin-left: rpx(8)
}
.mar_l-10{
  margin-left: rpx(10)
}
.mar_b-5{
  margin-bottom: rpx(5)
}
.mar_b-10{
  margin-bottom: rpx(10)
}
.mar_b-20{
  margin-bottom: rpx(20)
}
.mar_b-30{
  margin-bottom: rpx(30)
}
.mar_b-44{
  margin-bottom: rpx(44)
}
.mar_b-45{
  margin-bottom: rpx(45)
}
.mar_b-50{
  margin-bottom: rpx(50);
}
.mar_b-80{
  margin-bottom: rpx(160);
}
.border-b{
  border-bottom:rpx(.5) solid $borderColor;
}
.border-r{
  border-right:rpx(.5) solid $borderColor;
}
.border-t{
  border-top:rpx(.5) solid $borderColor;
}
.border-b--no{
  border-bottom:none !important;
}
.border-t--no{
  border-top:0 !important;
}
.texta-r{
  text-align: right;
}
.texta-l{
  text-align: left;
}
.texta-c{
  text-align: center;
}
.title{
  background: $pageBgColor;
  @include fc(14,$mainTxtColor);
  height: rpx(40);
  line-height: rpx(40);
  padding: 0 rpx(15);
}
.title1{
  background: $pageBgColor;
  height: rpx(40);
  line-height: rpx(50);
  padding: 0 rpx(15);
  @include fc(13,$introColor)
}

.imgBox-32,.img-32{
  @include wh(32,32);
  @include borderRadius(rpx(5))
}
.imgBox-40,.img-40{
  @include wh(40,40);
  @include borderRadius(rpx(5))
}
.imgBox-44,.img-44{
  @include wh(44,44);
  @include borderRadius(rpx(5))
}
.imgBox-50,.img-50{
  @include wh(50,50);
  @include borderRadius(rpx(5))
}
.imgBox-60,.img-60{
  @include wh(60,60);
  @include borderRadius(rpx(5))
}
.imgBox-100,.img-100{
  @include wh(100,100);
}
.imgBox-108-81,.img-108-81{
  @include wh(108,81);
}
.imgBox-90-120,.img-90-120{
  @include wh(90,120);
}
.pimgBox-32,.pimg-32{
  @include wh(32,32);
  @include borderRadius(50%)
}
.pimgBox-44,.pimg-44{
  @include wh(44,44);
  @include borderRadius(50%)
}
.pview-44{
  background: #FFE98F;
  border: 0 solid $backgroundColor;
  @include wh(44,44);
  @include borderRadius(50%);
  text-align: center;
  @include fc(18,$basicTitColor);
  line-height: rpx(44);
 }
.pimgBox-50,.pimg-50{
  @include wh(50,50);
  @include borderRadius(50%)
}
.pimgBox-60,.pimg-60{
  @include wh(60,60);
  @include borderRadius(50%)
}

.imgBox-72 {
  @include wh(72, 72);
  @include borderRadius(rpx(5));
  border: rpx(.5) solid $pageBgColor;
}

.img-72 {
  @include wh(72, 72);
}
image{
  max-width: 100%;
  vertical-align: middle
}
textarea{
  width: 100%;
  @include fc(14,$basicTextColor);
  overflow: hidden
}
.textarea-placeholder{
  @include fc(14,$mainTxtColor)
}
.matter-textarea{
  height: rpx(90);
  border: rpx(.5) solid $borderColor;
  @include borderRadius(rpx(3));
  padding: rpx(10);
}
button{
  box-sizing: content-box;
  overflow: visible;
  padding:0;
  background-color: transparent;
  @include borderRadius(0)
}
button::after{
	content: none
}
.button-hover{
  background-color: none !important;
  background: none !important;

}
input{
  @include fc(14,#333333);
  overflow: hidden
}

.color4 {
  color: $blueColor !important
}

.colorF {
  color: $redColor !important
}

.colorR {
	color: $pureRedColor !important
}
.colorY {
	color: $highRedColor !important
}
.colorG {
	color: $wxGreenColor !important
}
.colorB {
	color: $pureBlueColor !important
}
.colorGreen {
  color: $greenColor !important
}
.h1,.h2,.h3,.h4,.h5,.h6 {
	font-size: rpx(22);
	line-height: 1.375;
	color: #000000;
	margin-bottom: rpx(5)
}
.h2 {
	font-size: rpx(18);
}
.h3 {
	font-size: rpx(16);
}
.h4 {
	font-size: rpx(15);
}
.h5 {
	font-size: rpx(14);
}
.h6 {
	font-size: rpx(13);
}
.line-del {
  text-decoration:line-through
}
.touming {
	opacity:0
}
.posrel {
	position: relative;
}

//下拉菜单运动
@keyframes slidown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0%);
  }
}

.slidown {
  display: block;
  animation: slidown .35s ease-in both;
}

@keyframes slidup {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}

.slidup {
  display: none;
  animation: slidup .35s ease-in both;
}

@keyframes slidown1 {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(20%);
  }
}

.slidown1 {
  display: block;
  animation: slidown1 .75s ease-in both;
}

@keyframes slidup1 {
  from {
    transform: translateY(20%);
  }
  to {
    transform: translateY(-100%);
  }
}

.slidup1 {
  display: block;
  animation: slidup1 .75s ease-in both;
}

//左滑运动
@keyframes slidleft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0%);
  }
}

.slidleft {
  display: block;
  animation: slidleft .35s ease-in both;
}

@keyframes slidright {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}

.slidright {
  display: none;
  animation: slidright .35s ease-in both;
}

.fullbg {
  position: fixed;
  top: 0;
  z-index: $zidxContent - 1;
  width: 100%;
  height: 100%;
  background: $popBgColor;
  display: none;
}
.fullopacity {
  z-index: $zidxCustNav+1;
  opacity: .3;
  display: block;
}


.fullopacity--a {
  z-index: $zidxContMask;
  opacity: .3;
  display: block;
}
.border-rad-no{
  border-radius: 0;
}
//左滑效果样式

$sale__lpop_len : 80;

.sale__lpop {
  position: absolute;
  //width: rpx(80);
  height: 100%;
  top: 0;
  right: rpx(-$sale__lpop_len);
  @include dispFlex;
  visibility: hidden;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  transition: all 0.4s;
}
.sale__lpop--in {
  visibility: visible;
  -webkit-transform: translate(rpx(-$sale__lpop_len), 0);
  -moz-transform: translate(rpx(-$sale__lpop_len), 0);
  -ms-transform: translate(rpx(-$sale__lpop_len), 0);
  transform: translate(rpx(-$sale__lpop_len), 0);
}
.sale__lpop--out {
  -webkit-transform: translate(rpx($sale__lpop_len), 0);
  -moz-transform: translate(rpx($sale__lpop_len), 0);
  -ms-transform: translate(rpx($sale__lpop_len), 0);
  transform: translate(rpx($sale__lpop_len), 0);
}
.sale__op--1,.sale__op--2 {
  display: inline-block;
  width: rpx(80);
  height: 100%;
  line-height: rpx(70);
  text-align: center;
  @include fc(16,$fontWhiteColor)
}
.sale__op--1 {
  background: #5D5CCC
}
.sale__op--2 {
  background: $wxRedColor
}
